import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { deng } from '../https/index'
// 适配不同设备的rem转换
const rem = (px) => `${px / 16}rem`;
const Login = () => {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const nav = useNavigate();

  // 监听窗口尺寸变化，动态调整根字体大小（适配不同设备）
  useEffect(() => {
    const setRootFontSize = () => {
      const width = document.documentElement.clientWidth;
      // 以375px为基准，根字体16px；其他尺寸按比例计算
      document.documentElement.style.fontSize = `${(width / 375) * 16}px`;
    };

    setRootFontSize();
    window.addEventListener('resize', setRootFontSize);
    return () => window.removeEventListener('resize', setRootFontSize);
  }, []);

  const login = async () => {
    if (!phone || !password) {
      showToast('请输入手机号和密码');
      return;
    }

    setIsLoading(true);
    try {
      const res = await deng(phone, password)

      if (res.data.code === 200) {
        showToast('登录成功', 'success');
        sessionStorage.setItem('logid', res.data.data._id)
        setTimeout(() => nav('/shou'), 1000);
      } else {
        showToast('登录失败');
      }
    } catch (error) {
      showToast('网络错误，请稍后重试');
    } finally {
      setIsLoading(false);
    }
  };

  // 模拟App内Toast提示
  const showToast = (text, type = 'error') => {
    // 创建toast元素
    const toast = document.createElement('div');
    toast.style.position = 'fixed';
    toast.style.left = '50%';
    toast.style.top = '70%';
    toast.style.transform = 'translate(-50%, -50%)';
    toast.style.padding = `${rem(8)} ${rem(16)}`;
    toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    toast.style.color = '#fff';
    toast.style.borderRadius = rem(20);
    toast.style.fontSize = rem(14);
    toast.style.zIndex = '9999';
    toast.style.transition = 'opacity 0.3s, transform 0.3s';
    toast.innerText = text;

    document.body.appendChild(toast);

    // 显示动画
    setTimeout(() => {
      toast.style.opacity = '1';
      toast.style.transform = 'translate(-50%, -50%) scale(1)';
    }, 10);

    // 3秒后移除
    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translate(-50%, -50%) scale(0.8)';
      setTimeout(() => document.body.removeChild(toast), 300);
    }, 3000);
  };

  return (
    <div style={{
      width: '100%',
      minHeight: '100vh',
      backgroundColor: '#f7f8fa',
      paddingTop: rem(50),
      boxSizing: 'border-box',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    }}>
      {/* App Logo区域 */}
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        marginBottom: rem(40)
      }}>
        <div style={{
          width: rem(100),
          height: rem(100),
          borderRadius: rem(20),
          backgroundColor: '#1677ff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: '0 4px 12px rgba(22, 119, 255, 0.3)'
        }}>
          <span style={{
            color: '#fff',
            fontSize: rem(30),
            fontWeight: 'bold'
          }}>A</span>
        </div>
      </div>

      {/* 登录表单卡片 */}
      <div style={{
        width: '90%',
        margin: '0 auto',
        backgroundColor: '#fff',
        borderRadius: rem(16),
        padding: rem(20),
        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)',
        boxSizing: 'border-box'
      }}>
        {/* 标题 */}
        <h2 style={{
          fontSize: rem(20),
          color: '#1d1d1f',
          textAlign: 'center',
          marginBottom: rem(25),
          fontWeight: '600'
        }}>欢迎登录</h2>

        {/* 手机号输入框 */}
        <div style={{
          marginBottom: rem(15),
          position: 'relative'
        }}>
          <div style={{
            position: 'absolute',
            left: rem(15),
            top: '50%',
            transform: 'translateY(-50%)',
            color: '#8e8e93',
            fontSize: rem(16)
          }}>
            📱
          </div>
          <input
            type="tel"
            placeholder="请输入手机号"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            style={{
              width: '100%',
              height: rem(50),
              paddingLeft: rem(50),
              paddingRight: rem(15),
              fontSize: rem(16),
              borderRadius: rem(25),
              border: '1px solid #e2e2e2',
              backgroundColor: '#f9f9f9',
              boxSizing: 'border-box',
              outline: 'none',
              '&:focus': {
                borderColor: '#1677ff'
              }
            }}
            maxLength="11"
          />
        </div>

        {/* 密码输入框 */}
        <div style={{
          marginBottom: rem(20),
          position: 'relative'
        }}>
          <div style={{
            position: 'absolute',
            left: rem(15),
            top: '50%',
            transform: 'translateY(-50%)',
            color: '#8e8e93',
            fontSize: rem(16)
          }}>
            🔒
          </div>
          <input
            type="password"
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{
              width: '100%',
              height: rem(50),
              paddingLeft: rem(50),
              paddingRight: rem(15),
              fontSize: rem(16),
              borderRadius: rem(25),
              border: '1px solid #e2e2e2',
              backgroundColor: '#f9f9f9',
              boxSizing: 'border-box',
              outline: 'none'
            }}
          />
        </div>

        {/* 记住密码 & 忘记密码 */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: rem(25),
          fontSize: rem(14)
        }}>
          <label style={{
            display: 'flex',
            alignItems: 'center',
            color: '#6e6e73',
            cursor: 'pointer'
          }}>
            <input
              type="checkbox"
              style={{
                width: rem(16),
                height: rem(16),
                marginRight: rem(8),
                accentColor: '#1677ff'
              }}
            />
            <span>记住密码</span>
          </label>
          <a
            href="#"
            style={{
              color: '#007aff',
              textDecoration: 'none',
              fontSize: rem(14)
            }}
          >
            忘记密码?
          </a>
        </div>

        {/* 登录按钮 */}
        <button
          onClick={login}
          disabled={isLoading}
          style={{
            width: '100%',
            height: rem(50),
            backgroundColor: isLoading ? '#8bb6ff' : '#1677ff',
            color: '#fff',
            borderRadius: rem(25),
            border: 'none',
            fontSize: rem(17),
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'backgroundColor 0.2s',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          {isLoading ? (
            <div style={{
              width: rem(20),
              height: rem(20),
              border: `2px solid rgba(255, 255, 255, 0.7)`,
              borderTopColor: 'transparent',
              borderRadius: '50%',
              animation: 'spin 1s linear infinite'
            }} />
          ) : '登录'}
        </button>
      </div>

      {/* 注册入口 */}
      <div style={{
        marginTop: rem(20),
        textAlign: 'center',
        fontSize: rem(14)
      }}>
        <span style={{ color: '#6e6e73' }}>还没有账号? </span>
        <a
          href="#"
          style={{
            color: '#007aff',
            textDecoration: 'none',
            fontWeight: '500'
          }}
        >
          立即注册
        </a>
      </div>

      {/* 其他登录方式 */}
      <div style={{
        marginTop: rem(40),
        padding: '0 ' + rem(20)
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          marginBottom: rem(20)
        }}>
          <div style={{
            flex: 1,
            height: '1px',
            backgroundColor: '#e2e2e2'
          }} />
          <span style={{
            margin: '0 ' + rem(10),
            fontSize: rem(13),
            color: '#8e8e93'
          }}>其他登录方式</span>
          <div style={{
            flex: 1,
            height: '1px',
            backgroundColor: '#e2e2e2'
          }} />
        </div>

        {/* 第三方登录图标 */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          gap: rem(30)
        }}>
          <div style={{
            width: rem(50),
            height: rem(50),
            borderRadius: '50%',
            backgroundColor: '#f0f0f0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.05)',
            transition: 'transform 0.2s'
          }}>
            <span style={{ fontSize: rem(22) }}>🐧</span>
          </div>
          <div style={{
            width: rem(50),
            height: rem(50),
            borderRadius: '50%',
            backgroundColor: '#f0f0f0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.05)',
            transition: 'transform 0.2s'
          }}>
            <span style={{ fontSize: rem(22) }}>🍊</span>
          </div>
          <div style={{
            width: rem(50),
            height: rem(50),
            borderRadius: '50%',
            backgroundColor: '#f0f0f0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.05)',
            transition: 'transform 0.2s'
          }}>
            <span style={{ fontSize: rem(22) }}>📱</span>
          </div>
        </div>
      </div>

      {/* 底部版权信息 */}
      <div style={{
        marginTop: rem(50),
        fontSize: rem(12),
        color: '#8e8e93',
        textAlign: 'center',
        paddingBottom: rem(20)
      }}>
        © 2023 示例App 版权所有
      </div>
    </div>
  );
};

export default Login;